<!-- 左抽屉，不含按钮 -->
<template>
  <div class="left-drawer" >

    <div :class="maskClass" @click="closeByMask"></div>

    <div :class="mainClass" :style="mainStyle" class="main">
      <div class="drawer-head">
        <span>{{ title }}</span>
                <span
                  v-show="closable"
                  class="close-btn"
                  @click="closeByButton"
                >x</span>
      </div>
      <div class="drawer-body" :style="bodyStyle">
        <slot />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    // 是否打开
    display: {
      type: Boolean
    },
    // 标题
    title: {
      type: String,
      default: '标题'
    },
    // 是否显示关闭按钮
    closable: {
      type: Boolean,
      default: true
    },
    // 是否显示遮罩
    mask: {
      type: Boolean,
      default: true
    },
    // 是否点击遮罩关闭
    maskClosable: {
      type: Boolean,
      default: true
    },
    // 宽度
    width: {
      type: String,
      default: '400px'
    },
    // 高度
    height: {
      type: String,
      default: '75%'
    },
    // 是否在父级元素中打开
    inner: {
      type: Boolean,
      default: false
    }
  },
  watch:{
    height(){


    }
  },
  computed: {
    drawerStyle: function (){
      /** 定位在左边中央 仅支持单位% */
      let leng=this.height.length;
      if (this.boxHeight.substring(leng-1,leng)=="%") {
        return {'top':(100-this.height.substring(0, leng - 1)) * 0.5 + "%"}
      }else {
        return {'top':'50%'};
      }
    },
    maskClass: function () {
      return {
        'mask-show': this.mask && this.display,
        'mask-hide': !(this.mask && this.display),
        inner: this.inner
      }
    },
    mainClass: function () {
      return {
        'main-show': this.display,
        'main-hide': !this.display,
        inner: this.inner
      }
    },
    mainStyle: function () {
      let leng=this.height.length;
      //console.log(this.height);
      let top="50%";
      if (this.height.substring(leng-1,leng)=="%") {
        top = (100-this.height.substring(0, leng - 1)) * 0.5 + "%";
        //return {'top':(100-this.height.substring(0, leng - 1)) * 0.5 + "%"}
      }
      //console.log("top: %o",top);
      return {
        width: this.width,
        height: this.height,
        //bottom: this.display ? '0' : `-${this.height}`,
        left: this.display ? '0' : `-${this.width}`,
        borderTop: this.mask ? 'none' : '1px solid #eee',
        'top':top,
      }
    },
    bodyStyle: function () {
      return {
        //height: this.height
        width: this.width
      }
    }
  },
  mounted () {
    /** 是否限制在父组件内 */
    if (this.inner) {
      let box = this.$el.parentNode
      box.style.position = 'relative'
    }

  },
  methods: {
    closeByMask () {
      //console.log("closeByMask");
      //this.maskClosable && this.$emit('update:display', false)
    },
    closeByButton () {
      //console.log("closeByButton");
      this.$emit('close', false)
    }
  },

}
</script>
<style lang="less" scoped>

.left-drawer{
  .mask-show {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 11;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 1;
    transition: opacity 0s;
  }
  .mask-hide {
    opacity: 0;
    transition: opacity 0s;
  }
  .main {
    position: fixed;
    z-index: 10;
    left: 0;
    top: 50%;
    width: 30%;
    border-bottom-right-radius: 10px; //右下角园形
    border-top-right-radius: 10px; //右上角园形
    //background: #2d8cf0;
    /*background-color: rgba(8, 63, 231, 0.9);*/
    background-color: rgb(5, 31, 112);
    transition: all 0s;
  }
  .main-show {
    opacity: 1;
  }
  .main-hide {
    opacity: 0;
  }
  .inner {
    position: absolute;
  }
  /*抽屉头*/
  .drawer-head {
    display: flex;
    //justify-content: space-between;
    justify-content: center;
    //align-items: center;
    height: 32px;
    padding: 20px;
    //box-sizing: border-box;
    //border-top-left-radius: 10px;
    //border-top-right-radius: 10px;
    font-size: 14px;
    //font-weight: bold;
    color: #FFFFFF;
    background: #051f70ff;
    position: relative;
    //border-bottom: 1px solid #eee;
    .close-btn {
      font-size: 16px;
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%); //向上移50%
      display: inline-block;

      cursor: pointer;
    }
  }
  .drawer-body {
    // padding: 20px;
    font-size: 14px;
    overflow: auto;
  }

}
</style>
